<template>
    <div id="fabu">
        <BackHeader :header="Header"></BackHeader>
        <div class="bg">
                <mt-field label="标题" placeholder="发布标题" v-model="main.title"></mt-field>
                <mt-radio
                    title="发布类型"
                    v-model="main.role"
                    :options="['景点类型', '美食类型', '路线类型']">
                </mt-radio>
                <div class="row">
                    <div class="upload col-4 mt10">
                        <fieldset class="btn btn-danger pic">
                            <span>上传图片</span>
                            <input type="file" class="myFileUpload" name="file"
                            accept="image/x-png, image/jpg, image/jpeg" @change="upload">  
                        </fieldset>
                    </div>
                    <div class="show col-8 mt10 lue_1"></div>
                </div>
                <div class="area">
                <p>攻略地址：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
                <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
                </div>
                <mt-field label="优惠" placeholder="大学生优惠" v-model="main.sell"></mt-field>
                <div class="main">
                    <a>内容：</a>
                    <textarea class="form-control" rows="8" v-model="main.content"></textarea>
                </div>
            <div class="Fabu"><mt-button type="primary" @click="FABU1">发布</mt-button></div>
        </div>
    </div>
</template>
<script>
import myaddress from "../../assets/js/area.json";
import BackHeader from "../../components/Header/BackHeader.vue";
import CommonProvider from "@/providers/CommonProvider";
import MemberCenterProvider from "@/providers/MemberCenterProvider";
import { MessageBox } from "mint-ui";
import moment from "moment"
import axios from "axios";
export default {
  name: "fabu",
  props: {},
  data() {
    return {
      datafiles: [],
      Header: "发布",
      main: [],
      pic:'',
      role: "",
      userName:"",

      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县"
    };
  },
  mounted: function() {
    this.init(),
      this.$nextTick(() => {
        //vue里面全部加载好了再执行的函数  （类似于setTimeout）
        this.myAddressSlots[0].defaultIndex = 0;
        // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      });
  },
  methods: {
    upload(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.datafiles = files;
      console.log(this.datafiles);
    },
    init() {
      $(function() {
        $(".myFileUpload").change(function() {
          var arrs = $(this)
            .val()
            .split("\\");
          var filename = arrs[arrs.length - 1];
          $(".show").html(filename);
        });
      });
    },
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
      }
    },
    FABU1() {      
      if (
        !this.main.title ||
        !this.main.sell ||
        !this.main.content ||
        !this.main.role
      ) {
        MessageBox("提示", "内容有漏填！");
      } else {
        if (this.main.role == "景点类型") {
          this.role = 0;
        } else if (this.main.role == "美食类型") {
          this.role = 1;
        } else if (this.main.role == "路线类型") {
          this.role = 2;
        }
        let formData = new FormData();
        formData.append("file", this.datafiles[0]);
        //console.log('aaa',formData.get('file'));
        CommonProvider.uploadpic(formData)
          .then(res => {
            this.pic = res.data
            if(!this.pic){
                MessageBox("提示", "内容有漏填！");
            }else{
                MemberCenterProvider.layin().then(res => {
                    this.userName = res.data.userName
                    console.log(res.data.userName)
                    let data = {
                        main: {
                            title: this.main.title,
                            sell: this.main.sell,
                            address: this.myAddressCity + this.myAddresscounty,
                            content: this.main.content,
                            role: this.role,
                            imgs: this.pic,
                            publish_time:moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
                            publish_man:this.userName
                        }
                        };
                        CommonProvider.Fabu(data).then(res => {});
                        MessageBox.alert("发布成功！").then(action => {
                            this.$router.go(-1);
                        });
                })
                
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  components: {
    BackHeader
  }
};
</script>
<style lang="scss" scoped>
.bg {
  margin-top: 40px;
  margin-bottom: 50px;
}
.pic {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-left: 10px;
}
.pic input {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.upload {
  margin-top: 5px;
}
.show {
  margin-top: 10px;
}
.row {
  margin-right: 0px !important;
}
.main {
  width: 95%;
  margin-left: 10px;
  margin-top: 10px;
}
.area {
  margin-left: 10px;
  margin-top: 10px;
}
.Fabu {
  text-align: center;
  margin-top: 20px;
}
</style>